<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js"></script>
</head>
<body>
<div class="main_r">
    <form action="">
        <h4>服务：{{title}}</h4>
        <div class="form-group">
            <label class="control-label">检测套餐名称</label>
            <input type="text" class="form-control" v-model="combo.name" placeholder="可以修改套餐名称"
                   v-if="combo.id > 0" required="required">
            <input type="text" class="form-control" v-model="combo.name" style="width:400px;"
                   placeholder="请输入套餐名称(长度 2-20个字):" v-else required="required">
            <span class="help-block err0">{{err0}}</span>
        </div>
        <div class="form-group">
            <label class="control-label">检测套餐描述</label>
            <textarea class="form-control" style="width: 250px; height:95px;" v-model="combo.intro" placeholder="描述套餐详情(40个字或80个字母以内)"></textarea>
            <span class="help-block err1">{{err1}}</span>
        </div>
        <div class="form-group">
            <label class="control-label">套餐优惠价</label>
            <input type="number" class="form-control" v-model="combo.price" placeholder="可以修改套餐价格"
                   v-if="combo.id > 0" required="required">
            <input type="number" class="form-control comboPrice" v-model="combo.price" min="0", max="1000000000"
                   style="width:220px;" placeholder="不能超过所选检测项目总价" v-else required="required">
            <span>套餐价格为：{{combo.price}} RMB</span>
            <span class="help-block err2">{{err2}}</span>
        </div>
        所选检测项目总价<span id="selectedPrice">{{totalPrice}}</span><br>
        <span>套餐组合：</span> <br>
        <div>
            <ul style="width:560px;">
                <template v-for="orgItem in service.orgitemList">
                    <li style="width:276px; float:left; margin:2px; height:29px; line-height:25px;">
                        <input name="serviceItems" type="checkbox" style="float:left;"
                               v-model="combo.itemIds" :value="orgItem.id" :id="orgItem.id">
                        <label class="label label-primary" style="float:left; margin-left:15px;"
                               v-text="orgItem.item_name_cn" :for="orgItem.id"></label><span
                            class="badge" style="float:left;"
                            v-text="orgItem.item_price"></span>
                    </li>
                </template>
            </ul>
            <div style=" clear:both; visibility:hidden;">
            </div>
        </div>
        <input type="submit" value="提交"/>
    </form>
</div>
</body>
<script>
    var oldTotalPrice;
    var vm = new Vue({
        el: '.main_r',
        data: {
            title: 'XXXX套餐管理',
            err0: '',
            err1: '',
            err2: '',
            citems: [],
            service: {
                id: '1565',
                orgitemList: [

                    {
                        id: 27625,
                        item_name_cn: '品质中国实地审核',
                        item_price: 1200.0
                    }


                ]
            },
            combo: {
                id: '',
                intro: '',
                isHidden: false,
                itemIds: [],
                name: '',
                price: null,
                serviceId: null
            }
        }, computed: {},
        methods: {},
        watch: {
            combo: function (combo) {
                combo.price = combo.price.trim();
                if (combo.price==0) combo.price = null;
            }
        },
        mounted: function () {

        }
    })


</script>
</html>